<script setup>
  import { timetable, timeline } from '@/apis/timetable-mock'

  const today = new Date().getDay()
  let list = timetable.data.filter((item) => item.day === today)[0].courses
  if (!list) list = []
  const amList = list.filter((item) => item.endTime <= 5)
  const pmList = list.filter((item) => item.startTime > 5 && item.endTime <= 10)
  const nightList = list.filter((item) => item.startTime > 10)

  function getStartTime(item) {
    return timeline.filter((i) => i.order === item.startTime)[0].startTime
  }
  function getEndTime(item) {
    return timeline.filter((i) => i.order === item.endTime)[0].endTime
  }
</script>

<template>
  <view class="container">
    <h3 style="text-align: center">今日课程</h3>
    <view class="title">上午课程</view>
    <view v-if="amList.length !== 0">
      <view class="course" v-for="(item, index) in amList" :key="index">
        <view class="time">
          <text>{{ getStartTime(item) }}</text>
          <br />
          <text>{{ getEndTime(item) }}</text>
        </view>
        <view class="border"></view>
        <view class="info">
          <text class="name">{{ item.name }}</text>
          <text class="description">
            第{{ item.startTime }}-{{ item.endTime }}节 | {{ item.classroom }} |
            {{ item.teacher }}
          </text>
        </view>
      </view>
    </view>
    <view v-else class="no-class">暂无课程</view>

    <view class="title">下午课程</view>
    <view v-if="pmList.length !== 0">
      <view class="course" v-for="(item, index) in pmList" :key="index">
        <view class="time">
          <text>{{ timeline.filter((i) => i.order === item.startTime)[0].startTime }}</text>
          <br />
          <text>{{ timeline.filter((i) => i.order === item.endTime)[0].endTime }}</text>
        </view>
        <view class="border"></view>
        <view class="info">
          <text class="name">{{ item.name }}</text>
          <text class="description">
            第{{ item.startTime }}-{{ item.endTime }}节 | {{ item.classroom }} |
            {{ item.teacher }}
          </text>
        </view>
      </view>
    </view>
    <view v-else class="no-class">暂无课程</view>

    <view class="title">晚上课程</view>
    <view v-if="nightList.length !== 0">
      <view class="course" v-for="(item, index) in nightList" :key="index">
        <view class="time">
          <text>{{ timeline.filter((i) => i.order === item.startTime)[0].startTime }}</text>
          <br />
          <text>{{ timeline.filter((i) => i.order === item.endTime)[0].endTime }}</text>
        </view>
        <view class="border"></view>
        <view class="info">
          <text class="name">{{ item.name }}</text>
          <text class="description">
            第{{ item.startTime }}-{{ item.endTime }}节 | {{ item.classroom }} |
            {{ item.teacher }}
          </text>
        </view>
      </view>
    </view>
    <view v-else class="no-class">暂无课程</view>
  </view>
</template>

<style lang="scss" scoped>
  .container {
    padding: 10rpx 30rpx;
    .title {
      font-size: 16rpx;
      font-weight: bold;
      color: #18479588;
      margin: 32rpx 0;
      &:first-child {
        margin-top: 0;
      }
    }
    .course {
      padding: 0 20rpx;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      gap: 20rpx;
      .time {
        font-size: 24rpx;
        line-height: 32rpx;
        color: rgb(45, 45, 45);
      }
      .border {
        min-width: 6rpx;
        width: 6rpx;
        height: 70rpx;
        border-radius: 10rpx;
        background-color: #184795;
      }
      .info {
        flex-grow: 1;
        .name {
          display: block;
          min-width: 0;
          width: calc(100% - 40rpx);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .description {
          font-size: 16rpx;
          color: #666;
        }
      }
    }
    .no-class {
      padding: 0 20rpx;
      font-size: 16rpx;
      color: #666;
    }
  }
</style>
